<template>
    <div class="loginPage">
        <div class="loginWhole">
            <!-- 图标 -->
            <div class="companyLogosName">
                <div class="companyIcon">
                </div>
                <div class="companyName">垃圾招标后台管理</div>
            </div>
            <!-- 文本框区域 -->
            <div class="accountPassword">
                <div class="account">
                    <el-form ref="loginFormRef" :model="loginForm"  label-width="10px" class="demo-ruleForm">
                        <el-form-item  prop="account">
                            <el-input
                            style="width: 320px"
                            placeholder="请输入账号"
                            prefix-icon="el-icon-user-solid"
                            v-model="loginForm.account">
                            </el-input>
                        </el-form-item>
                        <el-form-item  prop="password">
                            <el-input
                            style="width: 320px"
                            status-icon="el-icon-user-solid"
                            type="password"
                            placeholder="请输入密码"
                            prefix-icon="el-icon-s-goods"
                            show-password
                            v-model="loginForm.password">
                            </el-input>
                        </el-form-item>
                    </el-form>
                </div>
                <div class="login">
                    <el-button @click="login" type="primary" class="primary">登录</el-button>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data(){
        return {
      // 这是登录表单的数据绑定对象
      loginForm: {
        account: '17649855122',
        password: '111111'
      }
        }
    },
    methods:{
            login() {
      this.$refs.loginFormRef.validate(async valid => {
        if (!valid) return
        const { data: res } = await this.$http.post('/api/regLogin', this.loginForm,window.sessionStorage.getItem('token'))
        if (res.code !== 200) return this.$message.error('登录失败！')
        this.$message.success('登录成功')
        // 1. 将登录成功之后的 token，保存到客户端的 sessionStorage 中
        //   1.1 项目中出了登录之外的其他API接口，必须在登录之后才能访问
        //   1.2 token 只应在当前网站打开期间生效，所以将 token 保存在 sessionStorage 中
        window.sessionStorage.setItem('token', res.data.token)
        // 2. 通过编程式导航跳转到后台主页，路由地址是 /home
        this.$router.push('/homepage')
      })
    }
    }
}
</script>

<style lang="less" scoped>
.displayFlex(@value){
    display: flex;
    flex-direction: @value;
    justify-content: center;
    align-items: center;
}

.loginPage{
    width: 100%;
    height: 100%;
    .displayFlex(none);
    background-image: url('../../assets/image/bg_img.png');
    overflow: hidden;
    .loginWhole{
        width: 420px;
        height: 500px;
        background: #FFFFFF;
        border-radius: 5px;
        overflow: hidden;
        .companyLogosName{
            width: 100%;
            height: 50%;
            div{
                .displayFlex(none);
            }
            .companyIcon{
                width: 100%;
                height: 70%;
                align-items: end;
                img{
                    transform: scale(1.4);
                }
            }
            .companyName{
                width: 100%;
                height: 30%;
                font-size: 26px;
                color: #0079fe;
                margin: 0px auto 40px auto;
                font-weight: bold;
            }
        }
        .accountPassword{
            width: 100%;
            height: 50%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: space-evenly;
            div{
                width: 80%;
                height: 50px;
                line-height: 50px;
                // background: #bababa;
            }
            .account{
                display: flex;
                justify-content: center;
                flex-direction: column;
            }
            .login{
                width: 100%;
                display: flex;
                justify-content: center;
                align-items: center;
                .primary{
                    width: 78%;
                }
            }
        }
    }
}
</style>